<template>
	<view class="mainpadding2">
		<u-navbar title="繳費中心" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="popshow=true">新增常用繳費</view>
		</u-navbar>
		<calendarMonthtwo ref="calendar" z-index="99999999" @changeMonth="changeMonth"></calendarMonthtwo>
		<view class="">
			<u-tabs :list="tabslist" :scrollable="false"  lineColor="#ffb800" @click="changetab"
				:activeStyle="{
		    color: '#ffb800',
		    fontWeight: 'bold',
		    transform: 'scale(1.05)'
		}" :inactiveStyle="{
		            color: '#333333',
					fontWeight: '540',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs>
		</view>
		<view class="mainpadding_top xiaohei main_size ffffff flexbetween radius" @click="jumpdetail('/pages/workbench/jiaofeixq?id=',1)">
			<view class="flexleft">
				<text class="margin_right1">電話費</text>
				<text class="xiaohuang">$15323</text>
			</view>
			<u-icon name="arrow-right" color="#333" size="16"></u-icon>
		</view>
		<view class="posibottom mainpadding">
			<view class="flexcenter main_size">
				<text class="">總計：</text>
				<text class="xiaohuang">$15323</text>
			</view>
		</view>
		<u-popup :show="popshow" round="10" @close="popshow=false" closeable>
			<view class="mainpadding_top">
				<view class="flexcenter titletext bold">新增常用繳費</view>
				<scroll-view scroll-y="true" style="max-height: 70vh;">
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">名稱</view>
						<input type="text" class="xiaohei main_size" maxlength="15" style="width: 100%;" placeholder="可輸入15個字" />
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">金額</view>
						<input type="number" class="xiaohei main_size" style="width: 100%;" placeholder="請輸入繳費金額" />
					</view>
					<!-- <view class="margin_top flexright main_size " style="color: #009890;text-decoration: underline;">最近繳費</view> -->
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">條碼一</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohei main_size" style="width: 100%;"  placeholder="請輸入" />
							<u-icon name="scan" color="#019891" size="16"></u-icon>
						</view>
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">條碼二</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohei main_size" style="width: 100%;"  placeholder="請輸入" />
							<u-icon name="scan" color="#019891" size="16"></u-icon>
						</view>
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">條碼三</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohei main_size" style="width: 100%;"  placeholder="請輸入" />
							<u-icon name="scan" color="#019891" size="16"></u-icon>
						</view>
					</view>
					<view class="flexright xiaohui smalltext margin_top1">例：0901090111</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">二維碼</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohei main_size"style="width: 100%;"  placeholder="請輸入" />
							<u-icon name="scan" color="#019891" size="16"></u-icon>
						</view>
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">銀行名稱</view>
						<input type="text" class="xiaohei main_size"style="width: 100%;"  placeholder="請輸入" />
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">銀行代號</view>
						<input type="text" class="xiaohei main_size"style="width: 100%;"  placeholder="請輸入" />
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">銀行帳號</view>
						<input type="text" class="xiaohei main_size"style="width: 100%;"  placeholder="請輸入" />
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">鏈接</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohei main_size"style="width: 100%;"  placeholder="請輸入" />
							<u-icon name="scan" color="#019891" size="16"></u-icon>
						</view>
					</view>
					<view class="xiaohei  margin_top5 main_size bold">是否開啓下列功能</view>
					<view class="flexleft margin_top1">
						<u-icon name="checkmark-circle-fill" color="#019891" size="16"></u-icon>
						<u-icon name="checkmark-circle" color="#019891" size="16"></u-icon>
						<view class="xiaohei main_size">固定時間通知我</view>
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">繳款日</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohei main_size" style="width: 100%;"  placeholder="請選擇" />
							<u-icon name="arrow-down-fill" color="#019891" size="16"></u-icon>
						</view>
					</view>
					<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;">
						<view class="xiaohei main_size" style="min-width: 150rpx;">截止日</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohei main_size" style="width: 100%;"  placeholder="請選擇" />
							<u-icon name="arrow-down-fill" color="#019891" size="16"></u-icon>
						</view>
					</view>
					<view class="flexbetween">
						<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;width: 35%;">
							<input type="number" class="xiaohei main_size" style="width: 100%;"  placeholder="請輸入" />
							<u-icon name="calendar-fill" color="#019891" size="16"></u-icon>
						</view>
						<view class="mainpadding_top flexbetween radius" style="border: 1rpx solid #999;width: 60%;" @click="guoqishow=true">
							<view class="xiaohei main_size" style="min-width: 150rpx;">複製月日</view>
							<view class="flexbetween" style="width: 100%;">
								<input type="text" class="xiaohei main_size" style="width: 100%;"  placeholder="請選擇" />
								<u-icon name="arrow-down-fill" color="#019891" size="16"></u-icon>
							</view>
						</view>
						
					</view>
					<view class="flexright">
						<view class="xiaohui smalltext margin_top1">下次將於2024-02-02提醒您繳費</view>
					</view>
					<view class="flexbetween margin_top5">
						<view class="quxiaobtn xiaobai titletext" style="color: #009890;">取消</view>
						<view class="submitbtn xiaobai titletext" style="background-color: #019891;border-radius: 10rpx;width: 45%;">確認</view>
					</view>
				</scroll-view>
				
			</view>
		</u-popup>
		<u-popup :show="guoqishow" @close="guoqishow=false" closeable>
			<view class="mainpadding_top">
				<view class="flexcenter titletext bold">新增常用繳費</view>
				<view class="titletext margin-top pdl" style="color: #009890;">月</view>
				<view class="titletext margin-top pdl" style="color: #009890;">日</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import calendarMonthtwo from '@/components/calendarMonthtwo.vue'
	export default {
		components: {
			'calendarMonthtwo': calendarMonthtwo,
		},
		data() {
			return {
				popshow:false,
				guoqishow:false,
				tabsid: 1,
				tabslist: [{
						name: '待繳費用',
						value: 1,
					},{
						name: '己繳費用',
						value: 2,
					}
				],
				yuefen: "",
				nextyue:"",
			}
		},
		methods: {
			changeMonth(e) {
				console.log(e);
				// 对应操作
				this.yuefen = e.year+"-"+e.month
				this.nextyue = e.year+"-"+e.nextmonth
				this.init()
			},
			changetab(e) {
				console.log(e,"999");
				this.tabsid = e.value
			},
		}
	}
</script>

<style>
.quxiaobtn{
	width: 45%;
	background-color: #fff;
	border: 1rpx solid #019891;
	border-radius: 10rpx;
	text-align: center;
	box-sizing: border-box;
	padding: 20rpx 0;
}
</style>
